// 定义单文件组件
import React from 'react';
import avatar from './avatar.jpeg';
import './Comments.css';
// 导入类名动态选择库
import classNames from 'classnames';
// 时间日期处理库
import dayjs from 'dayjs';
// js 工具库
import _ from 'lodash';

export class Comments extends React.Component {
  // 组件数据
  constructor() {
    // 初始化this，因为继承了。
    super();
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'hot',
      list: [
        {
          id: 1,
          author: '刘德华',
          comment: '给我一杯忘情水',
          time: new Date('2022-10-10 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 1,
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: new Date('2021-10-10 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0,
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: new Date('2021-10-11 10:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: -1,
        },
      ],
      // 用户输入的评论
      txt: '',
    };
    // textarea DOM 容器ref
    this.txtRef = React.createRef();
  }

  // 用户输入事件处理
  handleTxtChange = (e) => {
    this.setState({
      txt: e.target.value,
    });
  };
  // 发表评论事件处理函数
  handleAddComment = () => {
    console.log(this.state.txt);
    // 产品体验优化，如果评论内容为空，return
    if (!this.state.txt.trim()) {
      this.txtRef.current.focus();
      alert('请输入评论内容');
      return;
    }

    // 组装一个评论对象
    const comment = {
      id: Date.now(),
      author: '程朗',
      comment: this.state.txt,
      time: new Date(),
      attitude: 1,
    };
    // 设置页面数据
    this.setState({
      list: [comment, ...this.state.list],
      txt: '',
    });
    // 设置焦点到 textarea 输入框
    this.txtRef.current.focus();
  };

  // 删除评论事件处理函数
  delComment = (id) => {
    console.log(id);
    const filtered = this.state.list.filter((item) => item.id !== id);
    // 设置页面数据
    this.setState({
      list: filtered,
    });
  };

  // 点赞或点踩
  changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    const newList = this.state.list.map((item) => {
      // 判断点的是哪一条评论
      if (item.id === id) {
        // 返回一个新的评论对象
        return { ...item, attitude: attitude };
      }
      // if(另外一种情况处理1){
      //   return {情况处理1}
      // }
      // if(另外一种情况处理2){
      //   return {情况处理2}
      // }
      return item;
    });
    // 设置页面状态
    this.setState({
      list: newList,
    });
  };

  // 排序事件处理函数
  changeSortType = (type) => {
    console.log(type);
    // 热度按照id排序
    if (type === 'hot') {
      const sorted = this.state.list.sort((a, b) => {
        // id 升序, a - b
        // return a.id - b.id;
        // id 降序, b-a
        return b.id - a.id;
      });
      // 设置页面数据
      this.setState({
        list: [...sorted],
        active: type,
      });
    } else {
      // 时间排序
      // 按照时间升序
      // const sorted = this.state.list.sort((a, b) => {
      //   // 日期 升序, a - b
      //   // return a.time.getTime() - b.time.getTime();
      //   // 日期 降序, b - a
      //   return b.time.getTime() - a.time.getTime();
      // });
      // 使用第三方工具库
      const sorted = _.orderBy(this.state.list, ['time'], ['asc']);
      // 设置页面数据
      this.setState({
        list: [...sorted],
        active: type,
      });
    }
  };

  // 组件UI
  render() {
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-number">
            <span>{this.state.list.length} 评论</span>
          </div>

          {/* 排序tab */}
          <div className="tabs-order">
            {/* 类on选中效果 */}
            {this.state.tabs.map((item) => {
              return (
                <div
                  // className={this.state.active === item.type ? 'on' : ''}
                  className={classNames({
                    on: this.state.active === item.type,
                  })}
                  key={item.id}
                  onClick={() => this.changeSortType(item.type)}
                >
                  {item.name}
                </div>
              );
            })}
          </div>

          {/* 发表评论区 */}
          <div className="comment-send-container">
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>
            <div className="comment-send">
              <div className="textarea-container">
                <textarea
                  ref={this.txtRef}
                  value={this.state.txt}
                  onChange={this.handleTxtChange}
                  cols="80"
                  rows="5"
                  placeholder="发条友善的评论"
                  className="ipt-txt"
                />
                <button
                  className="comment-submit"
                  onClick={this.handleAddComment}
                >
                  发表评论
                </button>
              </div>
              <div className="comment-emoji">
                <i className="face"></i>
                <span className="text">表情</span>
              </div>
            </div>
          </div>

          {/* 评论列表区 */}
          <div className="comment-list">
            {this.state.list.map((item) => {
              return (
                <div className="comment-item" key={item.id}>
                  <div>
                    <img className="user-head" src={avatar} alt="头像" />
                  </div>

                  <div className="comment">
                    {/* 评论人 */}
                    <div className="user">{item.author}</div>
                    {/* 评论内容 */}
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">
                        {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                        {/* 原生JS Date 对象的方法 */}
                        {/* {item.time.toLocaleDateString()} */}
                        {/* {item.time.getFullYear() +
                          '$' +
                          (item.time.getMonth() + 1) +
                          '%' +
                          (item.time.getDate() + 1)} */}
                      </span>
                      <span
                        // className={
                        //   'like ' + (item.attitude === 1 ? 'liked' : '')
                        // }
                        className={classNames({
                          like: true,
                          liked: item.attitude === 1,
                        })}
                        onClick={() =>
                          this.changeAttitude(
                            item.id,
                            item.attitude === 1 ? 0 : 1
                          )
                        }
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className={
                          'hate ' + (item.attitude === -1 ? 'hated' : '')
                        }
                        onClick={() =>
                          this.changeAttitude(
                            item.id,
                            item.attitude === -1 ? 0 : -1
                          )
                        }
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className="btn-hover"
                        onClick={() => this.delComment(item.id)}
                      >
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default Comments;
